import { useEffect, useState } from "react";
import {
  Modal,
  NavBar,
  Icon,
  WingBlank,
  WhiteSpace,
  InputItem,
  Button,
  Toast,
} from "antd-mobile";
import { Link } from "react-router-dom";

import { reqVerifyPhone } from "../../../api/register";
import { phoneReg } from "../../../utils/regs";

import "./index.less";

const alert = Modal.alert;

function RegisterPhone(props) {
  // props就是父组件传递的props数据
  const { history, location } = props;

  // 手机号
  const [phone, setPhone] = useState("");
  // 决定按钮的禁用状态
  const [isDisabled, setIsDisabled] = useState(true);

  // useEffect 让工厂函数组件可以使用生命周期函数
  // 需求：只要执行一次，充当componentDidMount
  useEffect(() => {
    if (location.state) {
      return;
    }
    alert(
      // 标题
      "注册协议及隐私政策",
      // 内容
      <span className="policy-content">
        在您注册成为硅谷用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
        <span className="policy-strong">
          请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）
        </span>
        <span className="policy-text">《硅谷用户注册协议》</span>
        <span className="policy-text">《硅谷隐私政策》</span>
      </span>,
      // 底部按钮
      [
        /*
          什么是路由组件？通过Route加载的组件
          路由组件会接收到Route传递的三个属性：location、history、match
            history.push()
            history.replace()
            history.go()
          工厂函数组件怎么接受props？工厂函数组件第一个参数，就是props
        */
        { text: "不同意", onPress: () => history.push("/login/code") },
        {
          text: "同意",
          // onPress: () => console.log('ok'),
          style: {
            backgroundColor: "#e94f4f",
            color: "#fff",
          },
        },
      ]
    );
    // [] useEffect的依赖项，一旦数组里面发生变化就会重新调用
    // 空数组没有内容，不会发生任何变化，只会执行一次
  }, [location.state, history]);

  /*
    跳转路由两种方式：
      1. Link / NavLink 路由链接导航
      2. history.push/replace() 编程式导航
      使用：
        如果只要进行路由跳转，一般用路由链接导航
        如果要进行一些其他操作，在进行路由跳转，用编程式导航
          比如：登陆，发送请求判断是否登陆成功，再跳转首页
  */

  const prefix = "+" + (location.state || "86");

  // 处理手机号发生变化的事件
  const handleInputChange = (val) => {
    // 表单校验
    if (phoneReg.test(val)) {
      // 将按钮的禁用状态给取消
      setIsDisabled(false);
    } else {
      // 开启按钮的禁用状态
      setIsDisabled(true);
    }

    // 收集手机号数据
    setPhone(val);
  };

  // 点击同意，验证手机号是否注册
  const verifyPhone = async () => {
    /*
      1. 请求成功、失败
        响应状态码 
          2xx 成功
          4xx、5xx 失败
        对于axios来说，2xx就是成功，非2xx就是失败
      2. 请求成功并不代表功能成功
        还需要判断 code
          20000 成功
          非20000 失败
    */
    try {
      const res = await reqVerifyPhone(phone);

      if (res.data.code === 20000) {
        // 成功 手机号没有注册
        history.push("/register/code", phone);
      } else {
        // 失败 手机号被注册了
        Toast.fail(res.data.message, 2);
      }
    } catch (e) {
      console.log(e);
      Toast.fail("请求失败了~", 2);
    }
  };

  // 下一步
  const next = () => {
    alert(
      // 标题
      "",
      // 内容
      `我们将发送短信/语音验证码至：${phone}`,
      // 底部按钮
      [
        { text: "不同意" },
        {
          text: "同意",
          // 发送请求，验证手机号是否注册过
          onPress: verifyPhone,
          style: {
            backgroundColor: "#e94f4f",
            color: "#fff",
          },
        },
      ]
    );
  };

  const goCountry = () => {
    history.push("/countryPicker", "/register/phone");
  };

  // goCountry()(); // 测试

  return (
    <div className="register-phone">
      <NavBar
        mode="light"
        icon={<Icon type="left" className="icon-left" />}
        onLeftClick={() => history.push("/login/code")}>
        硅谷注册
      </NavBar>
      <WingBlank size="lg">
        <WhiteSpace size="xl" />
        {/* 使用受控组件：通过change事件和state来自动收集表单数据 */}
        <InputItem
          className="input-item"
          placeholder="请输入手机号"
          clear
          onChange={handleInputChange}
          value={phone}>
          <span onTouchEnd={goCountry} className="register-phone-prefix">
            <span>{prefix}</span>
            <Icon type="down" />
          </span>
        </InputItem>
        <WhiteSpace size="xl" />
        <Button
          type="primary"
          disabled={isDisabled}
          onClick={next}
          className="btn">
          下一步
        </Button>
      </WingBlank>
    </div>
  );
}

export default RegisterPhone;
